<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>vue的组件关系</h4>
        <ul>
            <li>任何一个vue项目，组件标签的加载都必须使用一个已知的组件实例容器</li>
            <li>
                因为组件标签的加载是依赖于一个已知的组件容器，<br>
                所以所有的vue项目都必然存在一个手动的启动组件（Root组件）
            </li>
            <li>组件间进行数据传递和共享是依赖于组件标签的使用</li>
            <li>所以vue项目构建的组件关系其实就是一个类似于HTML树形结构</li>
        </ul>
        <h4>父向子数据传递</h4>
        <ul>
            <li>传递技术:属性绑定+属性拦截</li>
            <li>属性绑定: <br>
                1. 在父组件容器中为子组件标签完成自定义属性绑定操作【 v-bind:自定义属性名=父组件响应数据 】<br>
                2. vue会完成组件实例构建操作，在createVNode创建虚拟DOM时，绑定在子组件标签上的所有vue语法都会被记录下来 <br>
                3. 其中以v-bind 绑定的属性会被定义在子组件实例对应的实例属性 $attrs 中，以响应式数据规则存在 <br>
                4. 当完成 render 函数渲染时，$attrs 中记录的属性会被绑定在子组件根元素上作为普通标签属性存在 <br>
            </li>
            <li>属性拦截：<br>
                1. 子组件配置中通过 props 属性定义，将$attrs中记录的相关属性数据，转存为一个子组件的类似data的数据 <br>
                2. props 中被取出的数据属性使用规则基本等同于 data 参数数据 <br>
                3. 当props 完成定义后，$attrs中对应的属性将被删除 <br>
            </li>
        </ul>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <child-comp v-bind:msg="msg" :user="user"></child-comp>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"父组件数据",
                    user:{
                        name:"tom"
                    }
                }
            },
            components: {
                ChildComp:{
                    template:`
                        <div class="cbox">
                            <p>组件ChildComp</p>
                            <p>$attrs.msg:{{ $attrs.msg }}</p>
                            <p>msg:{{ msg }}</p>
                            <input type="button" value="printThis" @click="printThis()">
                            <p>user:{{ user }}</p>
                            <p>user.name:{{ user.name }}</p>

                        </div>
                    `,
                    // 实例响应式数据仓库
                    props:["user","msg"],
                    methods: {
                        printThis() {
                            console.log(this);
                        }
                    },
                },
            },
        }).mount("#app")
    </script>
</body>
</html>